import React, { Fragment } from 'react';
import { Card, Button, Spin, Divider } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';

const { Description } = DescriptionList;

@connect(({ searchrecord, loading }) => ({
  searchrecord,
  loading: loading.models.searchrecord,
}))
class searchDetail extends React.Component {
  componentDidMount() {
    const { dispatch, location } = this.props;
    const { rcrdId } = location.query;
    dispatch({
      type: 'searchrecord/getDic',
      payload: ['MSGTYPE', 'CONSULT_WAY', 'CONSULT_STATUS'],
    }).then(() => {
      this.detail(rcrdId);
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const parmters = {
      replyContent: undefined,
      remindDate: undefined,
      state: '2',
      content: undefined,
      type: undefined,
      consultWay: undefined,
      othContactWay: undefined,
      contactEmail: undefined,
      contactPhone: undefined,
      areaName: undefined,
      custName: undefined,
      certNo: undefined,
      empName: undefined,
      rcrdId: undefined,
      vno: undefined,
      historyArr: [],
    };
    dispatch({
      type: 'searchrecord/updateModelData',
      payload: parmters,
    });
  }

  // 查看接口
  detail = rcrdId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'searchrecord/fetchDetail',
      payload: { rcrdId },
    });
  };

  // 表单检测 并 提交
  submitedit = () => {
    const { location } = this.props;
    const { rcrdId } = location.query;
    this.linkRoute(rcrdId, 'revise');
  };

  linkRoute = (id, path) =>
    id
      ? router.push(`/hrmanage/searchrecord/${path}?rcrdId=${id}`)
      : router.push(`/hrmanage/${path}`);

  submitback = () => {
    router.goBack();
  };

  render() {
    const { loading, searchrecord } = this.props;
    return (
      <PageHeaderWrapper>
        <Spin spinning={loading} size="large">
          <Card title={<span>基本信息</span>}>
            <DescriptionList>
              <Description term="姓名">{searchrecord.empName || '--'}</Description>
              <Description term="证件类型">{searchrecord.certTypeName || '--'}</Description>
              <Description term="证件号">{searchrecord.certNo || '--'}</Description>
              <Description term="客户名称">{searchrecord.empCorpName || '--'}</Description>
              <Description term="执行地">{searchrecord.areaName || '--'}</Description>
              <Description term="电话">{searchrecord.contactPhone || '--'}</Description>
              <Description term="邮箱">{searchrecord.contactEmail || '--'}</Description>
            </DescriptionList>
          </Card>
          <Card title="咨询记录">
            {!!searchrecord.historyArr.length &&
              searchrecord.historyArr.map((item, i) => (
                <Fragment>
                  <DescriptionList>
                    <Description term="更新人员">{item.operName || '--'}</Description>
                    <Description term="更新时间">
                      {item.operTime ? moment(item.operTime).format('YYYY-MM-DD HH:mm') : '--'}
                    </Description>
                    <Description term="回复状态">{item.stateName || '--'}</Description>
                    <Description term="咨询方式">{item.consultWayName || '--'}</Description>
                    <Description term="咨询类型">{item.typeName || '--'}</Description>
                    <Description term="咨询内容">{item.content || '--'}</Description>
                    <Description term="回复内容">{item.replyContent || '--'}</Description>
                  </DescriptionList>
                  {searchrecord.historyArr.length === i + 1 ? null : <Divider dashed />}{' '}
                </Fragment>
              ))}
            {!searchrecord.historyArr.length && '暂无数据'}
          </Card>
        </Spin>

        <FooterToolbar>
          <Button type="primary" onClick={this.submitedit}>
            更新
          </Button>
          <Button onClick={this.submitback}> 返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default searchDetail;
